<template>
  <page-view class="order">
    <page-header title="订单">
    </page-header>
    <div class="content-box">

        <list
            v-model:loading="loading"
            :finished="finished"
            finished-text="订单全部加载完啦"
            @load="onLoad"
            >
      <div v-for="(item,index) in orderInfo" :key="index" class="order-class">
      <ul class="order-desc">
          <li><span>订单编号:{{item.id}}</span></li>
          <li><span>订单时间:{{formateDate(item.submit_time)}}</span></li>
          <li><span>订单总数:</span></li>
          <li><span>订单金额:</span></li>
          <li><span>订单状态:</span>{{item.order_status}}</li>
          <li>
            <steps :active="item.active">
              <step>买家下单</step>
              <step>商家接单</step>
              <step>买家提货</step>
              <step>交易完成</step>
            </steps>
          </li>
              <li><span>订单列表</span></li> 
      </ul>
      <ul class="order-item">
          <!-- <li v-for="(item2,index2) in order" :key="index2">
            <div class="left">{{index2+1}}</div>
            <div class="right">数量</div>

          </li>
          <li>
            <div class="left">
              <Button>
                <tag type="danger">取消订单</tag>
              </Button>
            </div>
            <div class="right">评论</div>

          </li> -->
      </ul>
      </div>
        </list> 
    </div>
  </page-view>
</template>

<script>
import { useRouter ,useRoute} from 'vue-router'
import { List,Image as VanImage,Step, Steps,Button,Tag,Toast} from 'vant';
import { reactive, toRefs } from '@vue/reactivity';
import api from '../utils/api';
import formateDate from '../filters/DateFilter.js'
export default {
  components: { List,VanImage,Step, Steps,Button,Tag },
  name:'Order',
  setup () {
    const route=useRoute();
   
    let info=reactive({
      loading:false,
      finished:true, 
      active:1,
      pageCount: 0,
      pageEnd: 0,
      pageIndex: 1,
      pageStart: 1,
      totalCount: 0,
       orderInfo:null,


    })

const getOrder=async (pageIndex)=>{
    info.loading=true;
    let result=await api.orderInfo.getMyOrderListByPage(pageIndex)
    //给订单数据写入action
    result.listData.forEach(item=>{
      if (item.order_status === "未付款") {
          item.active = 0;
        } else if (item.order_status === "已付款") {
          item.active = 1;
        } else if (item.order_status === "已发货") {
          item.active = 2;
        } else if (item.order_status === "已完成") {
          item.acitve = 3;
        }
    })
   info.orderInfo=result.listData
     info.pageCount=result.pageCount
    info.pageIndex=+result.pageIndex
    info.pageStart=result.pageStart
    info.pageEnd=result.pageEnd
    info.totalCount=result.totalCount
  info.loading=false;//加载完之后需要手动关闭
  info.finished=info.pageIndex >=info.pageCount
console.log( info.orderInfo)
}
getOrder(1)
 //下滚懒加载
function onLoad(){
 if( info.pageIndex<info.pageCount){
        getOrder(info.pageIndex+1)
    }
}
 
//付款
const payMoney=async(id)=>{
   Toast.loading({
          message: '正在付款中...',
          forbidClick: true,
          duration:0 //会一直转
      });
      await api.orderInfo.userPayOrder(id);
      

}






   
    return {onLoad,
    ...toRefs(info),
    formateDate,

    
    }
  }
}
</script>

<style lang="scss" scoped>
.order{
  display:flex ;
  flex-direction: column;
  .content-box{ 
    flex: 1;
    overflow: auto;
    .order-item{
      box-sizing: border-box;
      padding: 5px;
      box-shadow: 0px 0px 10px lightgray;
      margin-top: 5px;
      .order-desc{
        font-size: 14px;
        li{
          line-height: 1.8;
          span{
            font-weight: bold;
          }
        }
      }

    }
  }
}
</style>